<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>AUI快速完成布局</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
<style type="text/css">
html {
    _overflow: auto;
}
body {
  /*background-image: url(./image/background.jpg);
  background-size: cover;
  _width: expression_r(this.parentNode.clientWidth);*/
}

.slider{
  #ececec
  /*height: 290px;*/
  padding-bottom: 20px;
  min-height: 260px;
  background-color: #ececec;
  padding: 10px;
}
html,  body {
    height:100%;

}
.echart {
    min-height: 250px;
}

.aui-content {
    height: 12.5%;
    min-height:35px;
    margin-left: 10px;
    background-color: #ececec;
}
.aui-range{
  height: 12.5%;
  min-height:35px;
}
.aui-range-primary{
  width: 190px;
}
.btn{
  margin-left: 10px;
      width: 100%;
  background-color: #ececec;
  height: 25%;
  min-height: 50px;
  display:table;
  margin-top: -10px;
}
.btn1{
  height:100%;
  display:table-cell;
  vertical-align: middle;
  width: 50%;
}
.label{
    display: table-cell;
    vertical-align: middle;
    color: #f5f5f5;
    padding: 1px;
    font-family: "黑体";
    background-color: #4CAF50;
    white-space: nowrap;
    border-radius: 10%;
    margin: 1rem;
    font-size: 0.6rem;
    height: 1.5rem;
    width: 3rem;
}

  .textlab{
    background-color: #f5f5f5;
    border-radius: 15%;
    font-size: #f5f5f5;
    font-size: 0.7rem;
    text-align: center;
    border: 1px solid #666666;
    height: 1.4rem;
    width: 3rem;
}

</style>
</head>
  <body>
    <div id="echart"class="echart">
      <div id="chart" style="width: 100%;height:250px;"></div>
    </div>
    <div id="slider" class="slider">


      <div class="aui-content ">
                <div class="aui-range aui-col-xs-2" style="padding:10px;">
                  <span id="1value" class="aui-label aui-label-warning" style="display:table-cell;vertical-align:middle;  background-color: #C1232B;">CH1</span>
                </div>
                <div class="aui-range aui-col-xs-7" style="padding:10px;">
                  <input type="range" value="50" max="100" min="1" class="aui-range-primary" id="range1" onchange="myrange.upslider(this,'show')"/>
                </div>
                <div class="aui-range aui-col-xs-2" style="padding:10px;">
                   <input id = "show1" type="text" name="fname" style="background-color: #039be5;border-radius: 15%;font-size:#f5f5f5;font-size: 0.7rem;text-align:center;"onchange="myrange.upinput(this,'range')"/>
                </div>

      </div>
      <div class="aui-content ">

                <div class="aui-range aui-col-xs-2" style="padding:10px;">
                  <span id="2value" class="aui-label aui-label-warning" style="display:table-cell;vertical-align:middle;  background-color: #B5C334;">CH2</span>
                </div>
                <div class="aui-range aui-col-xs-7" style="padding:10px;">
                  <input type="range" value="50" max="100" min="1" class="aui-range-primary" id="range2" onchange="myrange.upslider(this,'show')"/>
                </div>
                <div class="aui-range aui-col-xs-2" style="padding:10px;">
                   <input id = "show2" type="text" name="fname" style="background-color: #039be5;border-radius: 15%;font-size:#f5f5f5;font-size: 0.7rem;text-align:center;"onchange="myrange.upinput(this,'range')"/>
                </div>

      </div>
      <div class="aui-content ">

                <div class="aui-range aui-col-xs-2" style="padding:10px;">
                  <span id="3value" class="aui-label aui-label-warning" style="display:table-cell;vertical-align:middle;  background-color: #FCCE10;">CH3</span>
                </div>
                <div class="aui-range aui-col-xs-7" style="padding:10px;">
                  <input type="range" value="50" max="100" min="1" class="aui-range-primary" id="range3" onchange="myrange.upslider(this,'show')"/>
                </div>
                <div class="aui-col-xs-2" style="padding:10px;height:35px;">
                   <input id = "show3" type="text" name="fname" style="background-color: #039be5;border-radius: 15%;font-size:#f5f5f5;font-size: 0.7rem;text-align:center;"onchange="myrange.upinput(this,'range')"/>
                </div>

      </div>
      <div class="aui-content ">

                <div class="aui-range aui-col-xs-2" style="padding:10px;">
                  <span id="4value" class="aui-label aui-label-warning" style="display:table-cell;vertical-align:middle;  background-color: #E87C25;">CH4</span>
                </div>
                <div class="aui-range aui-col-xs-7" style="padding:10px;">
                  <input type="range" value="50" max="100" min="1" class="aui-range-primary" id="range4" onchange="myrange.upslider(this,'show')"/>
                </div>
                <div class="aui-col-xs-2" style="padding:10px;height:35px;">
                   <input id = "show4" type="text" name="fname" style="background-color: #039be5;border-radius: 15%;font-size:#f5f5f5;font-size: 0.7rem;text-align:center;"onchange="myrange.upinput(this,'range')"/>
                </div>

      </div>
      <div class="aui-content ">

                <div class="aui-range aui-col-xs-2" style="padding:10px;">
                  <span id="5value" class="aui-label aui-label-warning" style="display:table-cell;vertical-align:middle;  background-color: #27727B;">CH5</span>
                </div>
                <div class="aui-range aui-col-xs-7" style="padding:10px;">
                  <input type="range" value="50" max="100" min="1" class="aui-range-primary" id="range5" onchange="myrange.upslider(this,'show')"/>
                </div>
                <div class="aui-col-xs-2" style="padding:10px;height:35px;">
                   <input id = "show5" type="text" name="fname" style="background-color: #039be5;border-radius: 15%;font-size:#f5f5f5;font-size: 0.7rem;text-align:center;"onchange="myrange.upinput(this,'range')"/>
                </div>

      </div>
      <div class="aui-content ">
                <div class="aui-range aui-col-xs-2" style="padding:10px;">
                  <span id="6value" class="aui-label aui-label-warning" style="display:table-cell;vertical-align:middle;  background-color: #FE8463;">CH6</span>
                </div>
                <div class="aui-range aui-col-xs-7" style="padding:10px;">
                  <input type="range" value="50" max="100" min="1" class="aui-range-primary" id="range6" onchange="myrange.upslider(this,'show')"/>
                </div>
                <div class="aui-col-xs-2" style="padding:10px;height:35px;">
                   <input id = "show6" type="text" name="fname" style="background-color: #039be5;border-radius: 15%;font-size:#f5f5f5;font-size: 0.7rem;text-align:center;"onchange="myrange.upinput(this,'range')"/>
                </div>
      </div>
      <div class="btn" >
              <div class="btn1">
                <div class="aui-col-xs-6" style="padding-left:60px;padding-right:30px;padding-top:10px;display:table-cell;">
                  <span id="6value" class="label" >设置温度</span>
                </div>
                <div class="aui-col-xs-6" style="padding:10px;display:table;">
                   <input id = "Mot_temp" type="text1" name="fname" class="textlab"/>
                </div>
              </div>


      </div>
    </div>

  </body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/aui-tab.js" ></script>
<script type="text/javascript" src="../script/aui-dialog.js" ></script>
<script type="text/javascript" src="../script/echarts.js" ></script>
<script type="text/javascript" src="../script/MyLib.js" ></script>
<script type="text/javascript">

var value=new Array();
var dialog = new auiDialog();
    apiready = function(){
         api.parseTapmode();
    }
       var myrange =new slider(6);
       var mychart= new Chart("chart",myrange.RangeValue);

    window.onload=function () {
        var slider=document.getElementById('slider');
        var silder_Height=(document.body.clientHeight-70-250-50)+'px';
        slider.style.height=silder_Height;
        var a=myrange.outvalue;
        mychart.CreatChart_Bar(myrange.RangeValue);
        UpdataInput('Mot_temp');

    }





</script>
</html>
